﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_layout/top :: top"></head>
<body>
<div id="page-wrapper">
	<header th:replace="_layout/header :: header"></header>

		<!-- Breadcrumb Start -->
		<div class="page-banner-image w-100 breadcrumb-bar" style="background-image: url(static/assets/images/background/1.png); background-repeat: no-repeat;">
			<div class="container">
				<div class="row py-5">
					<div class="col-sm-6">
						<h3 class="text-white">联系人</h3>
					</div>
					<div class="col-sm-6">
						<nav aria-label="breadcrumb" class="float-right">
							<ol class="breadcrumb mb-0 bg-transparent p-0 mt-2 mt-lg-1">
								<li class="breadcrumb-item"><a href="#">Home</a></li>
								<li class="breadcrumb-item active" aria-current="page">Contact</li>
							</ol>
						</nav>
					</div>
				</div>
			</div>
		</div>
	<!-- Breadcrumb End -->


	<div class="full-row bg-light">
		<div class="container">
			<div class="row row-cols-md-3 row-cols-1">
				<div class="col">
					<div class="border text-center py-5 h-100 mb-xs-30 h-xs-auto">
						<i class="fas fa-map-marker-alt text-primary mb-4 fa-3x"></i>
						<span class="d-block higlight-font font-large text-secondary">阿灵顿大道4214号,<br> AR 72040，美国</span>
					</div>
				</div>
				<div class="col">
					<div class="border text-center py-5 h-100 mb-xs-30 h-xs-auto">
						<i class="fas fa-phone-alt text-primary mb-4 fa-3x"></i>
						<span class="d-block higlight-font font-large text-secondary"><a href="#" class="text-secondary">(+1) 518-636-6052</a><br>周一至周六上午9:00至下午5:00</span>
					</div>
				</div>
				<div class="col">
					<div class="border text-center py-5 h-100 mb-xs-30 h-xs-auto">
						<i class="fas fa-envelope text-primary mb-4 fa-3x"></i>
						<span class="d-block higlight-font font-large text-secondary"><a href="#" class="text-secondary">Info@carhut.com</a><br>全天候在线支持</span>
					</div>
				</div>
			</div>
		</div>
	</div>


	<div class="full-row">
		<div class="container">
			<div class="row">
				<div class="col-lg-12 mb-5">
					<h2 class="down-line mb-5 m-auto text-center">联系</h2>
					<span class="mb-4 mt-4 sub-title ordenery-font text-center w-50 w-sm-100 font-medium mx-auto">Ridiculus sodales metus varius dictum fermentum ante dictumst eleifend quam. Taciti tortor aenean nisl dapibus.</span>
				</div>
			</div>
			<div class="row">
				<div class="col-12">
					<form>
						<div class="row">
							<div class="col-md-6">
								<div class="form-group">
									<input type="text" name="user-name" class="form-control bg-transparent border" placeholder="Name" required="">
								</div>
								<div class="form-group">
									<input type="email" name="user-email" class="form-control bg-transparent border" placeholder="Email" required="">
								</div>
								<div class="form-group">
									<input type="text" name="subject" class="form-control bg-transparent border" placeholder="Subject" required="">
								</div>
								<div class="form-group">
									<input type="text" name="user-phone" class="form-control bg-transparent border" placeholder="Phone" required="">
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
									<textarea name="message" class="form-control bg-transparent border" placeholder="Message" rows="6"></textarea>
								</div>
								<button class="btn btn-primary" type="submit">发送</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>


	<!--  Map Start -->
	<div class="full-row p-0">
		<div class="container-fluid">
			<div class="row">
				<div id="map" style="height: 500px; width: 100%; overflow: hidden;"></div>
			</div>
		</div>
	</div>
		<!--  Map End -->


	<footer th:replace="_layout/footer :: footer"></footer>
		<a href="#" class="bg-primary text-white hover-bg-primary" id="scroll"><i class="fa fa-angle-up"></i></a>
    </div>

    <!-- Javascripts -->
    <script src="static/assets/js/jquery.min.js"></script>
    <script src="static/assets/js/greensock.js"></script>
    <script src="static/assets/js/layerslider.transitions.js"></script>
    <script src="static/assets/js/layerslider.kreaturamedia.jquery.js"></script>
    <script src="static/assets/js/popper.min.js"></script>
    <script src="static/assets/js/bootstrap.min.js"></script>
    <script src="static/assets/js/bootstrap-select.min.js"></script>
    <script src="static/assets/js/jquery.fancybox.min.js"></script>
    <script src="static/assets/js/owl.js"></script>
    <script src="static/assets/js/wow.js"></script>
    <script src="static/assets/js/mixitup.min.js"></script>
    <script src="static/assets/js/custom.js"></script>

    <!-- use for map style -->
    <script src="http://www.google.cn/maps/api/js?key=AIzaSyBPZ-Erd-14Vf2AoPW2Pzlxssf6-2R3PPs"></script>
    <script src="static/assets/js/map.scripts.js"></script>
    <script>
        (function($) {
            var _latitude = 36.596165;
            var _longitude = -97.062988;
            init(_latitude, _longitude);
        })(jQuery);
    </script>

</body>
</html>